<template>
    <div>
        <h3>用户列表</h3>
        <list :list='list'>
            <!-- 做成一个类似组件的形式 来传递参数 -->
            <!-- 用 slot-scope 来接受当前插槽传递的作用域数据 -->
            <!-- 接收的参数为一个对象 对象的key为slot 上传递参数属性的名字，值为传递的数据-->
            <!-- {item: {…}, userName: "名字1"} -->
            <!-- vue 2.6 之前的用法 -->
            <!-- <template slot="state" slot-scope="zt">
                <b @click="clickEvt(zt)">在职</b>
            </template> -->
            <template v-slot:state="scope">
                <b :style="{color : scope.state === '在职' ? 'green' : scope.state === '休假' ? 'gray' : 'blue' }">{{scope.state}}</b>
            </template>
            <template v-slot:handle="scope">
                <i>编辑</i>
                <i @click="delOne(scope)">删除</i>
                <i v-if="scope.state === '休假'" @click="endRest(scope)">结束休假</i>
            </template>
        </list>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[] 
            }
        },
        created(){
            this.list = Array.from({length: 20}).map((v,i)=>{
                return {
                    id:'id'+(i+1),
                    name:'名字'+(i+1),
                    tel:'170405'+(i > 9 ? i : `0${i}`),
                    state:['在职','出差','休假'][i%3 === 0 ? 1 : i%5 === 0 ? 2 : 0]
                }
            })
        },
        methods:{
            clickEvt(data){
                debugger
                console.log(data);
            },
            endRest(data){
                this.list = this.list.map(it=>{
                    if(it.id === data.id){
                        it.state = '在职'
                    }
                    return it
                })
            },
            delOne(data){
                console.log(data,data.item);
                // console.log(this.list);
                console.log(this.list.indexOf(id));
            }
        }
    }
</script>

<style scoped>
    div{
        text-align: center;
    }
    i{
        display: inline-block;
        font-size: 12px;
        height: 20px;
        text-align: center;
        vertical-align: middle;
        line-height: 20px;
        font-style: normal;
        cursor: pointer;
        user-select: none;
        background-color:cornflowerblue;
        margin: 0 5px;
        padding: 3px 7px;
    }
    b{
        display: inline-block;
        font-size: 12px; 
    }
</style>
